<template>
    <div class="nc-passing" ref="ncPassing"  id="detail-content">
      <div class="title">
        角色经历
      </div>

      <div class="nc-passing-content">
        <EditBox
            v-for="(item, index) in editList"
            :key="item.id"
            :placeholder="`模块${index+1}：请输入内容`"
            :id="`editBox${item.id}`"
            :index-model="item.indexModel"
            :node="item.node"
            :boxId ="item.id"
            :model-value="item.title"
            @update:modelValue="updateIndex"
        />

        <div class="root-add-button" @click="addOneTitle">
          添加根标题
        </div>
        <div class="root-add-button" @click="addTwoTitle">
          添加二级标题
        </div>
        <div class="root-sure-button" @click="emit('saveAllAndFresh')">
          全部保存
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import EditBox from "@/views/novel/character/components/content/EditBox.vue";
import {defineEmits, ref, defineProps, type Ref, type PropType} from "vue";

let props = defineProps({
  id: Number,
  sideBarRef: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:editList','scrollTo','saveAllAndFresh']);

// 由watch控制
const editList = ref<{id:number,node:{},indexModel:string,title:string}[]>([])

// 处理确认事件（示例：打印模块索引和输入值）
const addOneTitle = () => {
  let radomNumber = Date.now();
  let titleNumber = props.sideBarRef.getChildNumber(2)
  const newChild = {id: radomNumber, title: '主标题' + titleNumber, children: []}
  props.sideBarRef.addRootTitle('one', newChild)
  editList.value.push({title: '主标题' + titleNumber, indexModel: 'titleOne', node: newChild, id: radomNumber})
  //同步
  emit('update:editList',editList.value);
};


// 处理确认事件（示例：打印模块索引和输入值）
const addTwoTitle = () => {
  let radomNumber = Date.now();
  let titleNumber = props.sideBarRef.getChildNumber(3)
  const newChild = {id: radomNumber, title: '副标题' + titleNumber, children: []}
  let success = props.sideBarRef.addRootTitle('two', newChild)
  if (success) {
    editList.value.push({title: '副标题' + titleNumber, indexModel: 'titleTwo', node: newChild, id: radomNumber})
  }
  //同步
  emit('update:editList',editList.value);
};


// 处理确认事件（示例：打印模块索引和输入值）
const updateIndex = (node: any, newValue: any) => {
  console.log('收到父组件的值', node, newValue);
  if (node === undefined || node === null || Object.keys(node).length === 0) {
    return
  }
  //传递的node直接响应式???
  node.title = newValue;
  let target = editList.value?.find(item => item.id === node.id);
  console.log('xcvsfwwef',editList.value)
  console.log('targettargettarget',target)
  if (target){
    target.title = newValue;
  }
  emit('update:editList',editList.value);
};

//同步endList
let syncEditList = (list: any) => {
  console.log('变了，收到兄弟',list)
  editList.value = list;
}


// 监听并同步共有数组
// watch(editList.value,(newValue)=>{
//    //emit('update:editList',newValue);
//   console.log('收到主体的消息',newValue)
// })


defineExpose({syncEditList})

</script>


<style scoped lang="scss">
.nc-passing {
  color: black;
  position: relative;
  margin-top: 15px;
  //top: 70px;  /*不懂区别*/
  min-height: 1000px;
  border: 4px solid rgba(255, 255, 150, 0.8);
  //top: 60px;  /*不懂区别*/
  .title {
    color: black;
    font-size: 34px;
    text-align: center;
    justify-content: center;
    background-color: rgba(255, 255, 150, 0.3);
  }

  .nc-passing-content {
    position: relative;
    width: 100%;

    .title-One {
      margin-top: 2px;
      width: 100%; /* 占据父容器的100%宽度 */
      display: flex; /* 使用 flex 布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      text-align: center; /* 确保文本居中 */
      color: black;
      font-size: 24px;
      height: 32px;
    }

    .title-Two {
      margin-top: 2px;
      width: 100%; /* 占据父容器的100%宽度 */
      display: flex; /* 使用 flex 布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      text-align: center; /* 确保文本居中 */
      color: black;
      font-size: 20px;
      height: 24px;
    }
  }

  .root-add-button {
    margin-left: 10px;
    background-color: transparent;
    border: 2px solid pink;
    color: pink;
    padding: 4px 6px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .change-button:hover {
    background-color: rgba(255, 192, 203, 0.3);
  }

  .root-sure-button {
    margin-left: 10px;
    background-color: transparent;
    border: 2px solid lightskyblue;
    color: lightskyblue;
    padding: 4px 6px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .change-button:hover {
    background-color: rgba(135, 206, 250, 0.3);
  }

}
</style>